<template>
  <div class="todo-list">
    <!-- 如果没有任务，显示提示 -->
    <div v-if="todos.length === 0" class="empty-message">
      暂无任务，添加你的第一个任务吧！
    </div>
    
    <!-- 循环渲染每个任务项 -->
    <TodoItem 
      v-for="todo in todos" 
      :key="todo.id" 
      :todo="todo"
      @toggle-todo="handleToggle"
      @delete-todo="handleDelete"
    />
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';
import TodoItem from './TodoItem.vue';

// 接收父组件传递的任务列表
const props = defineProps({
  todos: {
    type: Array,
    required: true
  }
});

// 定义要向父组件发送的事件
const emit = defineEmits(['toggle-todo', 'delete-todo']);

// 处理任务状态切换
const handleToggle = (id) => {
  emit('toggle-todo', id);
};

// 处理任务删除
const handleDelete = (id) => {
  emit('delete-todo', id);
};
</script>

<style scoped>
.empty-message {
  color: #888;
  padding: 20px;
  text-align: center;
  font-style: italic;
}
</style>
    